<i18n>
{
  "en": {
    "helloworld": "hello wwww world!"
  },

  "zh": {
    "helloworld": "你好，世界!"
  }
}
</i18n>
<template>
  <div>
    <tab-head></tab-head>
    <div class="main">
      <div class="author-text">
        <div class="authorWrap">
          <div class="avator"><img :src="avator" alt="" width="50px"></div>
          <div class="name lineHeight1_5">
            <div class="redTex font16 ">美妆达人</div>
            <div class="grayTex">
              <span>1分钟前-</span>
              <span class="en font12">Makeup/Skincare</span>
            </div>
          </div>
          <div class="uv positionR">
            <div class="positionA bottom0">
               <img :src="look" alt="" width="20px">&nbsp;<span>300</span>
            </div>
          </div>
        </div>
        <div class="left PLR15 PT5">
          众多女人遇到过，却又普遍感觉棘手，无从跨越的美妆难题。只要有秘笈，就终有解决的一天
        </div>
        <div class="PT10 positionR">
          <img :src="video"  width="100%">
          <img :src="play" class="play positionA">
        </div>
         <flexbox class="bottom vux-1px-t MT15 PTB10">
          <flexbox-item>
            <img :src="thumb" width="20px" alt="">&nbsp;<span>34</span>
          </flexbox-item>
          <flexbox-item>
            <img :src="message" width="20px" alt="">&nbsp;<span>300</span>
          </flexbox-item>
          <flexbox-item>
            <img :src="star" width="20px" alt="">&nbsp;<span>300</span>
          </flexbox-item>
        </flexbox>
      </div>
    </div>
        <div class="main">
      <div class="author-text">
        <div class="authorWrap">
          <div class="avator"><img :src="avator" alt="" width="50px"></div>
          <div class="name lineHeight1_5">
            <div class="redTex font16 ">美妆达人</div>
            <div class="grayTex">
              <span>1分钟前-</span>
              <span class="en font12">Makeup/Skincare</span>
            </div>
          </div>
          <div class="uv positionR">
            <div class="positionA bottom0">
               <img :src="look" alt="" width="20px">&nbsp;<span>300</span>
            </div>
          </div>
        </div>
        <div class="left PLR15 PT5">
          众多女人遇到过，却又普遍感觉棘手，无从跨越的美妆难题。只要有秘笈，就终有解决的一天
        </div>
        <div class="PT10 positionR">
          <div class="pic_wrap">
            <span class="pic_item">
              <img :src="girl" alt="" width="100%">
            </span>
             <span class="pic_item">
              <img :src="girl" alt="" width="100%">
            </span>
            <span class="pic_item">
              <img :src="girl" alt="" width="100%">
            </span>
            <span class="pic_item">
              <img :src="girl" alt="" width="100%">
            </span>
          </div>
        </div>
         <flexbox class="bottom vux-1px-t MT15 PTB10">
          <flexbox-item>
            <img :src="thumb" width="20px" alt="">&nbsp;<span>34</span>
          </flexbox-item>
          <flexbox-item>
            <img :src="message" width="20px" alt="">&nbsp;<span>300</span>
          </flexbox-item>
          <flexbox-item>
            <img :src="star" width="20px" alt="">&nbsp;<span>300</span>
          </flexbox-item>
        </flexbox>
      </div>
    </div>
  </div>
</template>
<script>
import tabHead from './tabHead'
import { Flexbox, FlexboxItem } from 'vux'

export default {
  components: {
    tabHead,
    Flexbox,
    FlexboxItem
  },
  data() {
    return {
      avator: require('@/assets/image/avator.png'),
      look: require('@/assets/image/look.png'),
      video: require('@/assets/image/video.png'),
      play: require('@/assets/image/play.png'),
      thumb: require('@/assets/image/thumb.png'),
      message: require('@/assets/image/message.png'),
      star: require('@/assets/image/star.png'),
      girl: require('@/assets/image/girl.jpg')
    }
  },
  mounted() {
    this.$i18n.locale = 'en'
  }
}
</script>
<style lang='less'>
.main {
  background: #fff;
  .author-text {
    margin-bottom: 10px;
    .play {
      left: 50%;
      transform: translate(-50%, -50%);
      top: 50%;
    }
    .bottom {
      text-align: center;
      color: #808080;
      img {
        vertical-align: middle;
      }
    }
    .pic_wrap {
      overflow-x: auto;
      text-align: left;
      white-space: nowrap;
      .pic_item {
        width: 200px;
        // height: 80px;
        background: #ccc;
      }
    }
  }
  .authorWrap {
    display: flex;
    padding: 10px;
    .avator {
      flex: 0 1 70px;
      text-align: center;
      // height: 20px;
    }
    .name {
      flex: 1;
      text-align: left;
      .en {
        padding: 2px 4px;
        background: #ccc;
        border-radius: 15px;
      }
    }
    .uv {
      flex: 0 1 70px;
    }
  }
}
</style>
